import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ComponentFactoryResolver, Input,
  OnInit,
  ViewChild
} from '@angular/core';
import {PageHeaderType} from "../../../shared/components/page-header/page-header.component";
import {AdDirective} from "../../../shared/directives/ad.directive";
import {NzMenuModeType} from "ng-zorro-antd/menu/menu.types";
import {AdComponent, DynamicComponent} from "../../../core/services/types";
import {BreakpointObserver} from "@angular/cdk/layout";
import {MsdsEnterpriseComponent} from "./msds-enterprise/msds-enterprise.component";
import {MsdsElementComponent} from "./msds-element/msds-element.component";
import {MsdsDangerComponent} from "./msds-danger/msds-danger.component";
import {MsdsHelpComponent} from "./msds-help/msds-help.component";
import {MsdsFireComponent} from "./msds-fire/msds-fire.component";
import {MsdsLeakComponent} from "./msds-leak/msds-leak.component";
import {MsdsOperationStoreComponent} from "./msds-operation-store/msds-operation-store.component";
import {MsdsControlProtectComponent} from "./msds-control-protect/msds-control-protect.component";
import {MsdsLawComponent} from "./msds-law/msds-law.component";
import {MsdsPoisonComponent} from "./msds-poison/msds-poison.component";
import {MsdsStableComponent} from "./msds-stable/msds-stable.component";
import {MsdsSpecialityComponent} from "./msds-speciality/msds-speciality.component";
import {MsdsBiologyComponent} from "./msds-biology/msds-biology.component";
import {MsdsGarbageComponent} from "./msds-garbage/msds-garbage.component";
import {MsdsIdService} from "../../../core/services/store/biz-store-service/msds-id/msds-id.service";
import {MsdsTransportationComponent} from "./msds-transportation/msds-transportation.component";
import {MsdsOthersComponent} from "./msds-others/msds-others.component";
import {AdminKey} from "../../../config/constant";
import {WindowService} from "../../../core/services/common/window.service";
import {AdminService} from "../../../core/services/store/admin.service";

interface TabInterface {
  key: string;
  component: DynamicComponent;
}

@Component({
  selector: 'app-add-edit-list',
  templateUrl: './add-edit-list.component.html',
  styleUrls: ['./add-edit-list.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AddEditListComponent implements OnInit {
  pageHeaderInfo: Partial<PageHeaderType> = {
    title: '安全技术说明书（SDS）',
    breadcrumb: ['首页', 'SDS']
  };
  msdsId = -1;
  @ViewChild(AdDirective, {static: true}) adHost!: AdDirective;
  tabModel: NzMenuModeType = 'inline';
  settingComponent: TabInterface[] = [
    {key: 'msds-enterprise', component: new DynamicComponent(MsdsEnterpriseComponent, {label: ''}),},
    {key: 'msds-danger', component: new DynamicComponent(MsdsDangerComponent, {label: ''}),},
    {key: 'msds-element', component: new DynamicComponent(MsdsElementComponent, {label: '',}),},
    {key: 'msds-help', component: new DynamicComponent(MsdsHelpComponent, {label: ''}),},
    {key: 'msds-fire', component: new DynamicComponent(MsdsFireComponent, {label: ''}),},
    {key: 'msds-leak', component: new DynamicComponent(MsdsLeakComponent, {label: ''}),},
    {key: 'msds-operation-store', component: new DynamicComponent(MsdsOperationStoreComponent, {label: ''}),},
    {key: 'msds-control-protect', component: new DynamicComponent(MsdsControlProtectComponent, {label: ''}),},
    {key: 'msds-speciality', component: new DynamicComponent(MsdsSpecialityComponent, {label: ''}),},
    {key: 'msds-stable', component: new DynamicComponent(MsdsStableComponent, {label: ''}),},
    {key: 'msds-poison', component: new DynamicComponent(MsdsPoisonComponent, {label: ''}),},
    {key: 'msds-biology', component: new DynamicComponent(MsdsBiologyComponent, {label: ''}),},
    {key: 'msds-garbage', component: new DynamicComponent(MsdsGarbageComponent, {label: ''}),},
    {key: 'msds-transportation', component: new DynamicComponent(MsdsTransportationComponent, {label: ''}),},
    {key: 'msds-law', component: new DynamicComponent(MsdsLawComponent, {label: ''}),},
    {key: 'msds-others', component: new DynamicComponent(MsdsOthersComponent, {label: ''}),},
  ];
  menus: Array<{ key: string; title: string; selected?: boolean, disabled?: boolean }> = [
    {
      key: 'msds-enterprise',
      title: '化学品及企业标识 | (必填项)',
      selected: true,

    },
    {
      selected: false,
      key: 'msds-danger',
      title: '危险性概述',

    },
    {
      key: 'msds-element',
      title: '成分及组成信息',
      selected: false,

    },
    {
      selected: false,
      key: 'msds-help',
      title: '急救措施',

    },
    {
      selected: false,
      key: 'msds-fire',
      title: '消防措施',

    },
    {
      selected: false,
      key: 'msds-leak',
      title: '泄漏应急处理',

    },
    {
      selected: false,
      key: 'msds-operation-store',
      title: '操作处置与存储',

    },
    {
      selected: false,
      key: 'msds-control-protect',
      title: '接触控制/个体防护',

    },
    {
      selected: false,
      key: 'msds-speciality',
      title: '理化特性',

    },
    {
      selected: false,
      key: 'msds-stable',
      title: '稳定性和反应活性',

    },
    {
      selected: false,
      key: 'msds-poison',
      title: '毒理学资料',

    },
    {
      selected: false,
      key: 'msds-biology',
      title: '生态学资料',

    },
    {
      selected: false,
      key: 'msds-garbage',
      title: '废弃处置',

    },
    {
      selected: false,
      key: 'msds-transportation',
      title: '运输信息',

    },
    {
      selected: false,
      key: 'msds-law',
      title: '法规和其他信息',

    },
    {
      selected: false,
      key: 'msds-others',
      title: '其他信息',

    }
  ];
  currentTitle: string = this.menus[0].title;

  constructor(private componentFactoryResolver: ComponentFactoryResolver,
              private msdsIdService: MsdsIdService, private windowSrv: WindowService,
              private breakpointObserver: BreakpointObserver, private cdr: ChangeDetectorRef, public AdminService: AdminService,) {
  }

  to(item: { key: string; title: string; selected?: boolean }, isFirstLoad: boolean = false): void {
    if (!isFirstLoad && this.msdsId === -1) {
      return;
    }
    const selMenu = this.settingComponent.find(({key}) => {
      return key === item.key;
    });
    this.currentTitle = selMenu!.component.data.label;
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(selMenu!.component.component);
    const viewContainerRef = this.adHost.viewContainerRef;

    viewContainerRef.clear();
    const componentRef = viewContainerRef.createComponent<AdComponent>(componentFactory);
    componentRef.instance.data = selMenu!.component.data;
  }

  obBreakPoint(): void {
    this.breakpointObserver.observe(['(max-width: 767px)']).subscribe(result => {
      this.tabModel = result.matches ? 'horizontal' : 'inline';
      this.cdr.markForCheck();
    });
  }

  ngOnInit(): void {
    this.msdsIdService.getMsdsIdStoreStore().subscribe(res => {
      this.msdsId = res;
    });
    const permissions = this.windowSrv.getSessionStorage(AdminKey);
    if (permissions === '1') {
      this.AdminService.isAdmin = true;
    }
    this.to(this.menus[0], true);
    this.obBreakPoint();
  }

}
